<template>
  <div class="sidebar-menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-icon><House /></el-icon>
        <span>Dashboard</span>
      </el-menu-item>
      
      <el-sub-menu index="2">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="2-1">用户列表</el-menu-item>
        <el-menu-item index="2-2">角色管理</el-menu-item>
        <el-menu-item index="2-3">权限管理</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>内容管理</span>
        </template>
        <el-menu-item index="3-1">文章管理</el-menu-item>
        <el-menu-item index="3-2">分类管理</el-menu-item>
        <el-menu-item index="3-3">标签管理</el-menu-item>
      </el-sub-menu>
      
      <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { House, User, Document, Setting } from '@element-plus/icons-vue'

const router: Router = useRouter()
const activeIndex = ref('1')

const handleSelect = (key: string) => {
  // eslint-disable-next-line no-undef
  console.log('选中菜单项:', key)
  // 根据选中的菜单项进行路由跳转
  switch(key) {
  case '1':
    router.push('/')
    break
  case '2-1':
    router.push('/users')
    break
  case '4':
    router.push('/settings')
    break
  }
}
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
  border: none;
}
</style>